import React, { useEffect, useState } from "react";
import "./App.css";
import task from "./service/task";
import { ConfigProvider, Button, Tag, Table, Popconfirm } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import zhCN from "antd/locale/zh_CN";

const { Column } = Table;
const TASK_STATUS = [
  { label: "全部", value: "all" },
  { label: "未完成", value: 1 },
  { label: "已完成", value: 2 },
];
function App() {
  const [filter, setFilter] = useState("all");
  const [tasks, setTasks] = useState([]);
  const retrieveTask = async () => {
    let tasks = await task.getTasks();
    setTasks(tasks);
  };
  useEffect(() => {
    retrieveTask();
  }, []);
  return (
    <ConfigProvider locale={zhCN}>
      <div className="todos">
        <div className="todos-header">
          <h3>TASK OA管理系统</h3>
          <Button type="primary">新增任务</Button>
        </div>
        <div className="todos-tags">
          {TASK_STATUS.map(({ label, value }) => (
            <Tag
              key={value}
              color={filter === value ? "orange" : "default"}
              onClick={() => setFilter(value)}
            >
              {label}
            </Tag>
          ))}
        </div>
        <Table dataSource={tasks} rowKey="id">
          <Column title="编号" dataIndex="id" />
          <Column title="任务描述" dataIndex="description" />
          <Column
            title="状态"
            dataIndex="status"
            render={(value) => (value === 1 ? "未完成" : "已完成")}
          />
          <Column title="预计完成时间" dataIndex="expected_completion_time" />
          <Column title="实际完成时间" dataIndex="actual_completion_time" />
          <Column
            title="操作"
            render={(_, record) => {
              return (
                <>
                  <Popconfirm
                    title="确定要删除吗?"
                    icon={
                      <ExclamationCircleOutlined style={{ color: "red" }} />
                    }
                  >
                    <a>删除</a>
                  </Popconfirm>
                  <Popconfirm
                    title="确定完成了吗?"
                    icon={
                      <ExclamationCircleOutlined style={{ color: "green" }} />
                    }
                  >
                    <a style={{ marginLeft: "10px" }}>完成</a>
                  </Popconfirm>
                </>
              );
            }}
          />
        </Table>
      </div>
    </ConfigProvider>
  );
}

export default App;
